<template>
  <d2-container>
    <div class="p-2">
      <el-form :model="formTask" label-width="160px" ref="form" :rules="formRules">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="基础信息" name="first">
            <div style="width: 45%;" class="mt-3">
              <el-form-item label="任务编号" prop="number">
                <el-input v-model="formTask.number" placeholder="任务编号"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%;">
              <el-form-item label="任务标题" prop="title">
                <el-input v-model="formTask.title" placeholder="任务标题"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%;">
              <el-form-item label="任务分类" prop="category">
                <el-select v-model="formTask.category" placeholder="请选择分类">
                  <el-option v-for="item in taskcategoryList" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="mt-2">
              <el-form-item label="抢购档位" prop="paniccategory">
                <el-select v-model="formTask.paniccategory" placeholder="请选择档位">
                  <el-option v-for="item in paniccategoryList" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="width: 45%;">
              <el-form-item label="任务价格" prop="task_price">
                <el-input-number v-model="formTask.task_price" :precision="2" :min="0" :step="0.01"></el-input-number>
              </el-form-item>
            </div>
            <div style="width: 45%;">
              <el-form-item label="任务金币" prop="task_gold">
                <el-input v-model="formTask.task_gold" placeholder="任务金币"></el-input>
              </el-form-item>
            </div>
            <div style="width: 25%;">
              <el-form-item label="任务排序" prop="sort">
                <el-input v-model="formTask.sort" placeholder="任务排序"></el-input>
              </el-form-item>
            </div>
            <div style="width: 25%;">
              <el-form-item label="任务类型" prop="task_type">
                <el-select v-model="formTask.task_type" placeholder="请选择类型">
                  <el-option v-for="item in typeList" :key="item.value" :label="item.name"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="width: 30%;">
              <el-form-item label="任务份数" prop="total_copies">
                <el-input v-model="formTask.total_copies" placeholder="任务份数"></el-input>
              </el-form-item>
            </div>
            <div class="row-ac">
              <div>
                <el-form-item label="人均用时(分钟)" prop="usage_time">
                  <el-input v-model="formTask.usage_time"></el-input>
                </el-form-item>
              </div>
              <div class="ml-5">
                <el-form-item label="审核时间(分钟)" prop="audit_time">
                  <el-input v-model="formTask.audit_time"></el-input>
                </el-form-item>
              </div>
              <div class="ml-5">
                <el-form-item label="限制时间(分钟)" prop="limit_time">
                  <el-input v-model="formTask.limit_time"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="mt-2">
              <el-form-item label="任务图标" prop="icon_image">
                <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
                  :on-success="handleIconSuccess" :before-upload="beforeIconUpload">
                  <img v-if="formTask.icon_image" :src="formTask.icon_image" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </div>
            <div class="mt-2" style="width: 55%;">
              <el-form-item label="任务描述" prop="taskdes">
                <el-input type="textarea" :rows='3' v-model="formTask.taskdes" placeholder="任务描述"></el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="任务步骤" name="step">
            <div class="flex-1 mb-3" v-for="(copy, index) in formTask.task_step" :key="index">
              <div class="row-ac flex-1">
                <button @click="deleteCopy(index)">删除</button>
                <div class="step-num row ml-3">{{ index + 1 }}</div>
                <div class="ml-1">步骤:</div>
                <div class="ml-2" style="width: 68%;"><el-input v-model="copy.des" size="small"></el-input></div>
              </div>
              <div class="flex-1 d-f ml-9">
                <div class="sample-image mt-2" v-if="copy.sample_image != ''">
                  <el-image :src="copy.sample_image" fit="cover"></el-image>
                  <div class="sample-del row text-white" @click="delImage(index)">
                    <div class="iconfont icon-shanchu"></div>
                  </div>
                </div>
                <div class="sample-image mt-2 row" v-else>
                  <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
                    :on-success="createSuccessHandler(index)" :before-upload="beforeUpload">
                    <img v-if="copy.sample_image" :src="copy.sample_image" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
                <div class="ml-5 mt-5">
                  <div class="font-s-2">用户栏:</div>
                  <div class="row-ac mt-2">
                    <div class="font-s-2">是否上传图片</div>
                    <div class="ml-2"> <el-switch v-model="copy.pictures"></el-switch></div>
                  </div>
                  <div class="row-ac mt-2">
                    <div class="font-s-2">是否显示图片</div>
                    <div class="ml-2"> <el-switch v-model="copy.show"></el-switch></div>
                  </div>
                  <div class="row-ac mt-2">
                    <div class="font-s-2">是否填写文本</div>
                    <div class="ml-2"> <el-switch v-model="copy.text_Input"></el-switch></div>
                  </div>
                </div>
              </div>
            </div>
            <button @click="addCopy">增加步骤</button>
          </el-tab-pane>
        </el-tabs>
        <div class="row" style="width: 80%;margin-top: 20px;">
          <el-form-item>
            <el-button plain>取消</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

  </d2-container>
</template>

<script>
  import {
    taskDetailUrl,
    taskUpdateUrl,
    taskCreateUrl,
    taskcategoryListUrl
  } from '@/utils/task'
  import {
    paniccategoryListUrl,
  } from '@/utils/takemoney'
  import {
    imagesUploadUrl
  } from "@/utils/interface"
  import {
    baseURL
  } from '@/utils/request'
  export default {
    data() {
      return {
        addStatus: false,
        getTaskId: '',
        taskcategoryList: [],
        paniccategoryList: [],
        formTask: {
          number: '',
          title: '',
          task_price: '',
          task_gold: 0,
          sort: '',
          task_type: '',
          icon_image: '',
          taskdes: '',
          task_step: '',
          usage_time: 0,
          audit_time: 0,
          total_copies: '',
          limit_time: 0,
          user: 1,
          category: '',
          paniccategory: ''
        },
        formRules: {
          title: [{
            required: true,
            message: '请输入任务标题',
            trigger: 'blur'
          }]
        },
        typeList: [{
            value: 0,
            name: '注册下载'
          },
          {
            value: 1,
            name: '简单任务'
          }
        ],
        activeName: 'first',
        actionUrl: baseURL + imagesUploadUrl,
      }
    },
    mounted() {
      if (this.$route.query.taskId) {
        this.getTaskId = this.$route.query.taskId
        this.getTaskDetail()
        this.addStatus = true
      }
      this.getTaskcategoryList()
      this.getPaniccategoryList()
    },
    methods: {
      getTaskcategoryList() {
        this.$get(taskcategoryListUrl).then(res => {
          this.taskcategoryList = res.data.data.list
        })
      },
      getPaniccategoryList() {
        this.$get(paniccategoryListUrl).then(res => {
          this.paniccategoryList = res.data.data.list
        })
      },
      getTaskDetail() {
        this.$get(taskDetailUrl + this.getTaskId + '/').then(res => {
          if (res.data.code == 200) {
            this.formTask = {
              number: res.data.data.number,
              title: res.data.data.title,
              task_price: res.data.data.task_price,
              task_gold: res.data.data.task_gold,
              sort: res.data.data.sort,
              task_type: res.data.data.task_type,
              icon_image: res.data.data.icon_image,
              taskdes: res.data.data.taskdes,
              task_step: res.data.data.task_step,
              usage_time: res.data.data.usage_time,
              audit_time: res.data.data.audit_time,
              total_copies: res.data.data.total_copies,
              completed_copies: res.data.data.completed_copies,
              limit_time: res.data.data.limit_time,
              user: res.data.data.user,
              category: res.data.data.category,
              paniccategory: res.data.data.paniccategory
            }
          }
        })
      },
      handleClick() {},
      beforeIconUpload() {},
      handleIconSuccess(val) {
        this.formTask.icon_image = val.data.url
      },
      submitForm() {
        let formData = new FormData()
        formData.append('number', this.formTask.number)
        formData.append('title', this.formTask.title)
        formData.append('task_price', this.formTask.task_price)
        formData.append('task_gold', this.formTask.task_gold)
        formData.append('sort', this.formTask.sort)
        formData.append('task_type', this.formTask.task_type)
        formData.append('icon_image', this.formTask.icon_image)
        formData.append('taskdes', this.formTask.taskdes)
        formData.append('task_step', JSON.stringify(this.formTask.task_step))
        formData.append('usage_time', this.formTask.usage_time)
        formData.append('audit_time', this.formTask.audit_time)
        formData.append('total_copies', this.formTask.total_copies)
        formData.append('limit_time', this.formTask.limit_time)
        formData.append('user', this.formTask.user)
        formData.append('category', this.formTask.category)
        formData.append('paniccategory', this.formTask.paniccategory)
        if (this.addStatus) {
          this.$put(taskUpdateUrl + this.getTaskId + '/', this.formTask).then(res => {
            if (res.data.code == 200) {
              this.$message.success('修改成功')
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        }
      },
      addCopy() {
        this.formTask.task_step.push({
          sample_image: '',
          des: '',
          pictures: false,
          user_image: '',
          show: false,
          text_Input: false,
          text_content: ''
        });
      },
      deleteCopy(index) {
        this.formTask.task_step.splice(index, 1);
      },
      createSuccessHandler(index) {
        return (response, file, fileList) => {
          this.handleSuccess(response, file, fileList, index);
        };
      },
      handleSuccess(response, file, fileList, index) {
        this.formTask.task_step[index].sample_image = response.data.url
      },
      delImage(index) {
        this.formTask.task_step[index].sample_image = '';
      },
      beforeUpload() {

      }
    }
  }
</script>

<style lang="scss">
  .sample-image {
    width: 200px;
    position: relative;

    .sample-del {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, .5);
      position: absolute;
      right: 5px;
      top: 5px;
    }
  }

  .image-box {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background-color: #f1f1f1;

    .icon-tupian {
      font-size: 26px;
    }
  }

  .step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #E42F04;
    color: #fff;
  }
</style>